<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>行内表单</title>
</head>
<body>
    <!-- 要实现行内表单只需要在form标签上添加一个form-inline -->
    <form action="Login.jsp" method="post" class="form-inline">
        <!-- sr-only:全程是 scream reader only 意思是仅供屏幕阅读器使用 -->
        <label for="username" class="sr-only">用户名</label>
        <!-- m代表margin外边距，p代表padding内边距 -->
        <!-- l左边，r右边 t顶部 b底部 -->
        <!-- 数字代表的是rem -->
        <!-- rem代表的是一个字符的大小，也就是font-size ,boost rap默认的font-size是16px-->
        <!-- 1代表0.25rem 大概是4px -->
        <!-- 数字最大是5 -->
        <!-- mr-2代表margin-right:2rem -->
        <input type="text" placeholder="邮箱或id" id="username" required class="form-control mr-2 mt-2">
        <label for="password" class="sr-only">密码</label>
        <input type="password" placeholder="密码" id="password" required class="form-control mr-2 mt-2">
        <label>
            <input type="checkbox" class="form-check-input">记住我
        </label>
        <button type="submit" class="btn btn-primary ml-2">登录</button>
    </form>
</body>
</html>